<template>
  <div class="dswd-header">
    <div v-if="device === 'desktop'" class="dswd-main-header">
      <div class="dswd-header-container">
        <div class="dswd-menu-row">
          <div class="dswd-logo">
            <img src="../../assets/image/header/d-logo.png" alt="dswd-d-logo">
          </div>
          <div class="dswd-menu-content clearfix">
            <div>
              <Menu
                :menu-data="menuData"
                :active-path.sync="activePath"
                @menuChange="menuChange"
              />
            </div>
          </div>
          <!-- <div class="dswd-header-tel">
            <img src="../../assets/image/header/m-phone3.png" alt="dswd-header-tel">
            <span>13598895817</span>
          </div> -->
          <div
            v-if="userInfo.mobile === undefined"
            class="dswd-header-login-button"
            @click="login"
          >
            登 录
          </div>
          <div v-else class="dswd-header-login-button" @click="toWeb">
            项目中心
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="device === 'mobile' || device === 'ipad'"
      class="dswd-main-header"
    >
      <div class="dswd-m-header-container">
        <div class="dswd-m-menu-row">
          <div class="dswd-m-logo">
            <img src="../../assets/image/header/m-logo.png" alt="dswd-m-logo">
          </div>
          <div class="dswd-m-menu-switch" @click="menuVisible = true">
            <img
              src="../../assets/image/header/menu-more.png"
              alt="menu-more"
            >
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="menuVisible"
      :show-close="false"
      fullscreen
      append-to-body
      custom-class="menu-dialog"
    >
      <div slot="title">
        <div class="menu-header">
          <div class="dswd-menu-logo">
            <img
              src="../../assets/image/header/m-logo.png"
              alt="dswd-menu-logo"
            >
          </div>
          <div class="menu-close-icon" @click="menuVisible = false">
            <img
              src="../../assets/image/header/m-close.png"
              alt="dswd-menu-close"
            >
          </div>
        </div>
      </div>
      <Mobilemenu
        :active-path.sync="activePath"
        :menu-data="menuData"
        @menuChange="menuChange"
      />
    </el-dialog>
  </div>
</template>

<script>
import Menu from '@/components/Menu/menu'
import Mobilemenu from '@/components/Menu/mobilemenu'
import { mapState } from 'vuex'
export default {
  name: 'Header',
  components: {
    Menu,
    Mobilemenu
  },
  data() {
    return {
      userInfo: {},
      activePath: '/layout/home',
      menuVisible: false,
      menuData: [
        {
          id: '1',
          pid: '0',
          name: '首页',
          path: '/layout/home'
        },
        {
          id: '2',
          pid: '0',
          name: '关于我们',
          path: '/layout/aboutus'
        },
        {
          id: '3',
          pid: '0',
          name: '加入我们',
          path: '/layout/joinus'
        },
        {
          id: '4',
          pid: '0',
          name: '联系我们',
          path: '/layout/contactus'
        }
        // ,
        // {
        //   id: '5',
        //   pid: '0',
        //   name: '产品体系',
        //   path: '/layout/products'
        // }
      ]
    }
  },
  computed: {
    ...mapState({
      device: (state) => state.app.device,
      routerWidth: (state) => state.app.routerWidth
    })
  },
  beforeMount() {
    if (
      sessionStorage.getItem('userInfo') !== undefined &&
      sessionStorage.getItem('userInfo') !== null
    ) {
      this.userInfo = Object.assign(
        {},
        JSON.parse(sessionStorage.getItem('userInfo'))
      )
    }
  },
  mounted() {
    document.title = this.global.appName
    this.$router.push(this.activePath)
  },
  methods: {
    menuChange(item) {
      this.menuVisible = false
      this.$router.push(item.path)
      this.getBreadcrumbData(item.path)
    },
    getBreadcrumbData(path) {
      if (path === '/layout/home') {
        return
      }
      const breadcrumbData = []
      for (const item of this.menuData) {
        if (item.path === path) {
          breadcrumbData.push({
            id: item.id,
            name: item.name,
            path: item.path
          })
          this.$store.commit('SET_BREADCRUB_DATA', breadcrumbData)
          return
        }
      }
    },
    login() {
      // window.open(this.global.yunUrl)
      this.$router.push('/login')
    },
    toWeb() {
      window.open(this.global.yunUrl + '/?mobile=' + this.userInfo.mobile)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/header/index.scss";
.menu-header {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .dswd-menu-logo {
    width: 113px;
    img {
      width: 100%;
      vertical-align: middle;
    }
  }
  .menu-close-icon {
    width: 18px;
    height: 18px;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
      vertical-align: middle;
    }
  }
}
::v-deep .menu-dialog {
  .el-dialog__header {
    padding: 0 18px;
  }
}
</style>
